<template>
    <div class="signsData">
        <div class="signsData-title">
            <span>数据变化趋势</span>
            <a-date-picker :value="value" style="width: 160px;" :allowClear="false" @change="timeOnChange" />
        </div>
        <div id="signsDataChart"></div>
        <a-card  :loading="loading" class="signsData-info">
            <h3 class="signsData-info-title">安全范围   <a-button @click="editFence" icon="edit" type="link"/></h3>
            <p><span>心率</span><span>安全范围：60~100bpm</span></p>
            <p><span>血压</span><span>标准值：96/72mmHg</span><span>安全范围：高压：90~139mmHg；低压：60~89mmHg</span></p>
            <p><span>围栏</span><span>静安中心</span></p>
        </a-card>
    </div>
</template>

<script>
    import moment from "moment";
    import {userSafeRange, userSign} from "@/services/monitoring";
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        name: "signsData",
        data() {
            return {
                loading: false,
                value: '',
                chart: null,
            }
        },
        created() {
            this.value =  moment(new Date().getTime()).format('YYYY-MM-DD');
            this.initData();
        },
        mounted() {
            this.chart = this.$echarts.init(document.getElementById('signsDataChart'));
            this.chart.resize();
            setTimeout(() => {
                window.onresize =  () => {
                    this.chart.resize();
                }
            },200);
            erd.listenTo(this.$el,()=>{
                this.chart.resize();
            });
            this.$nextTick(() => {
                this.loadChart();
            })
        },
        methods: {
            editFence() {
                this.$router.push('/system/parameters')
            },
            loadChart() {
                this.chart.showLoading({
                    text: '数据正在努力加载...',
                    color: '#1890ff',
                    textStyle: { fontSize : 20 , color: '#444' },
                    effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
                });
                let cthedData = ['05:00','12:00',"15:00","19:00", "21:00"]
                userSign().then(({data}) => {
                    let {thedData, blood, count, high, low} = data;
                    let  option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            type:'scroll',
                            orient:'horizontal',
                            icon:"circle"
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {
                                    inside: true
                                },
                                data: thedData
                            },
                            {
                                show : false,
                                type: 'category',
                                "axisLine":{       //y轴
                                    "show":false
                                },
                                "axisTick":{       //y轴刻度线
                                    "show":false
                                },
                                "splitLine": {     //网格线
                                    "show": false
                                },
                                data: cthedData
                            },
                        ],
                        dataZoom:[{
                            type: 'inside', //slider表示有滑动块的，inside表示内置的
                        }],
                        grid: {
                            left: '0%',
                            right: '0',
                            bottom: '0',
                            top: 40,
                            containLabel: true
                        },
                        yAxis: [
                            {
                                type: 'value',
                                min: 0,
                                max: 200,
                                interval: 20,
                                axisLabel: {
                                    formatter: '{value} '
                                }
                            },
                            {
                                type: 'value',
                                "show":false,
                                max: 1500,
                                "axisLine":{       //y轴
                                    "show":false
                                },
                                "axisTick":{       //y轴刻度线
                                    "show":false
                                },
                                "splitLine": {     //网格线
                                    "show": false
                                }
                            }
                        ],
                        series: [
                            {
                                name:'步数',
                                type:'bar',
                                /*设置柱状图颜色*/
                                itemStyle: {
                                    normal: {
                                        color: '#60ACFC',
                                    }
                                },
                                barWidth:50,
                                "yAxisIndex": 1,
                                "xAxisIndex": 1,
                                data:count
                            },
                            {
                                name:'心率',
                                type:'line',
                                // smooth: true,
                                itemStyle : {  /*设置折线颜色*/
                                    normal : {
                                        color:'#32D3EB'
                                    }
                                },
                                data: blood
                            },
                            {
                                name:'低压',
                                type:'line',
                                // smooth: true,
                                itemStyle : {  /*设置折线颜色*/
                                    normal : {
                                        color:'#FEB64D'
                                    }
                                },
                                data:low
                            },
                            {
                                name:'高压',
                                type:'line',
                                // smooth: true,
                                itemStyle : {  /*设置折线颜色*/
                                    normal : {
                                        color:'#FF7B7B'
                                    }
                                },
                                data:high
                            }
                        ]
                    };
                    this.$nextTick(() => {
                        this.chart.setOption(option);
                        setTimeout(() => {
                            this.chart.hideLoading();
                        }, 500)
                    })
                })
            },
            initData() {
                this.loading = true;
                userSafeRange().then(({data}) => {
                    console.log(data);
                    this.loading = false;
                })
            },
            timeOnChange(v, dateString) {
                this.value = dateString;
                this.loadChart();
            }
        }
    }
</script>

<style lang="less">
.signsData{
    height: 100%;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    #signsDataChart{
        flex: 1;
    }
    &-title{
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        span{
            color: rgba(80, 80, 80, 1);
            font-size: 16px;
        }
    }
    &-info{
        height: 158px;
        border: none!important;
        border-top: 1px #d9d9d9 dashed!important;
        box-sizing: border-box;
        margin-top: 15px;
        background: transparent!important;
        &-title{
            color: rgba(0, 0, 0, 1);
            font-size: 16px;
        }
        p{
            color: rgba(80, 80, 80, 1);
            font-size: 14px;
            margin: 0;
            padding:  0 0 15px 0;
            span{
                margin-right: 15px;
            }
        }
        .ant-card-body{
            padding:  15px 0!important;
            margin: 0 !important;
        }
    }
}
</style>
